<template>
  <div id="contentBox">
    <div class="searchBox">
      <el-form :inline="true" ref="searchForm" :model="searchForm" label-width="96px">
        <el-form-item label="成交日期起" prop="startDate">
          <el-date-picker :editable="false" v-model="searchForm.startDate" type="date" placeholder="选择日期" :picker-options="startDateOpt"
            @change="debounceSeach">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="成交日期止" prop="endDate">
          <el-date-picker :editable="false" v-model="searchForm.endDate" type="date" placeholder="选择日期" :picker-options="endDateOpt"
            @change="debounceSeach">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单号" prop="orderNumber">
          <el-input v-model="searchForm.orderNumber" placeholder="请输入搜索内容..." @input.native="debounceSeach"></el-input>
        </el-form-item>
        <el-form-item label="经销商名称" prop="dealerName">
          <el-input v-model="searchForm.dealerName" placeholder="请输入搜索内容..." @input.native="debounceSeach"></el-input>
        </el-form-item>
        <el-form-item label="汽车名称" prop="carSubBrandNameAndCarName">
          <el-input v-model="searchForm.carSubBrandNameAndCarName" placeholder="请输入搜索内容..." @input.native="debounceSeach">
          </el-input>
        </el-form-item>

        <el-form-item style="   margin-bottom: 10px;">
          <el-button @click="resetSearchForm('searchForm')">重置</el-button>
          <el-button @click="exportExcels(searchForm,'car_order_record/export','补录成交数据')">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="tableBox" style="margin:0 25px;">
      <el-table :data="tableData.data" border id='table'>
        <el-table-column label="订单号" :min-width="100" fixed='left'>
          <template scope="scope">
            <span>{{ scope.row.orderNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="经销商名称" :min-width="200" fixed='left'>
          <template scope="scope">
            <span>{{ scope.row.dealerName}}</span>
          </template>
        </el-table-column>

        <el-table-column label="汽车名称" :min-width="150">
          <template scope="scope">
            <span>{{ scope.row.carName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="成交单价" width="120">
          <template scope="scope">
            <span>{{ (scope.row.totalPrice||0)|toFixed2 }}</span>
          </template>
        </el-table-column>
        <el-table-column label=" 成交日期" :min-width="150">
          <template scope="scope">
            <span>{{ getDate(scope.row.dealTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed='right'>
          <template scope="scope">
            <el-button style="margin-left:0;" @click="toggleEdit(false,'edit',scope.row.id)" size="small">编辑</el-button>
            <el-button style="margin-left:0;"  @click="toggleEdit(true,'look',scope.row.id)"  size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="text-align: center;margin-top: 15px;position:relative;">
      <el-button style="position: absolute;right: 25px;top: 0px;" type="primary"  @click="toggleEdit(false,'add',0)"  size="small">添加</el-button>
    </div>
      <el-dialog title="补录成交" v-if="dialogSendData.isCode" :visible.sync="dialogSendData.isCode"
        :lock-scroll='true' top=5% :close-on-click-modal="false">
        <Edit @Refresh="seachData()" :dialogSendData="dialogSendData"></Edit>
      </el-dialog>
       
    </div>
   <div class="block" style="text-align: center;margin-top: 40px;position:relative;">
		    <pagination v-on:refreshSeachData="seachData()"  :tableData="tableData" :searchForm="searchForm"></pagination>
		</div>
  </div>
</template>
<script src="./index.js">
</script>
